<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="en" >
<head>
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Pampa's Group Video Chat</title>
  <meta name="description" content="">
  <meta name="author" content="PampaSoft">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src='resources/js/libs/jquery-1.5.1.min.js'></script>
	<script type="text/javascript" src="resources/js/libs/jquery-ui-1.8.14.custom.min.js"></script>
	<!-- TokBox JS file -->
	<script src="http://staging.tokbox.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="resources/js/mylibs/groupvideochat.js" type="text/javascript" charset="utf-8"></script>
  <!-- CSS: implied media="all" -->
  <link rel="stylesheet" href="resources/css/style.css?v=2">
  <link type="text/css" href="resources/css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->

  <script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$( "input:button, button", "li" ).button();
			$('#disconnectLink').hide();
			$('#publishLink').hide();
			$('#unpublishLink').hide();
		    });
  </script>
</head>
<body>
<div id="page-container">
<header>
	<h1>Group VideoChat</h1>
	<h3>Hello Start Talking</h3>
	<nav id="nav" >
		<ul>
			<li><a>How it works</a></li>
			<li><a>Contact us</a></li>
			<li id="toggleDevicePanelLink" onclick="javascript:toggleDevicePanelDialog();"><a>Configure Camera/Mic</a></li>
			<li onclick="javascript: launchDialogById('genericDialog','Service Status');" ><a>Service Status</a></li>
		</ul>
	</nav>
</header>

	<div id="content">
		<div id="form-container" >
		<form:form id="request-form" modelAttribute="pampaForm">
			<h2>Main Form</h2>
			<ul id="input-list">
				<li>
					<label for="session-id">Session ID</label>
					<form:input type="text" id="session-id" path="session_id" value=""/>
				</li>
				<li>
					<label for="pass">Pass Token</label>
					<form:input type="text" id="pass-token" path="session_token" value=""/>
				</li>
				</ul>
				<ul id="submit-list">
				<li>
					<input id="req-id-btn" type="button" value="Join/Create New Session" onclick="javascript: createNewSession();"/>
					<input id="check-available-btn" type="button" value="Get Password/Token" onclick="javascript: requestTokenBySessionId(sessionId);"/>
				</li>
				<li>
					<div id="status-logger"></div>
				</li>
				<!-- <li>
					<input id="init-session" type="button" value="initiate Session" onclick="javascript: initializeSession();"/>
					<input id="" type="button" value="Enter Session" onclick="javascript: enterSession();"/>
				</li> -->
			</ul>
		</form:form>
		</div>
		<div id="screens-container" >
			<h2>Here goes the TokBox VideoChat Plugin</h2>
				<p> ..... is a videochat service based on the OpenTok API. It offers group videochat capabilities based on its Flash plugin-based client.</p>
				<p> To start chatting, just request a new SessionId and share it with your friends. If your friends already shared a SessionId with you, then enter it in the form on the left and request for a userId (a.k.a. User Token) and you're ready to start communicating.

				You can configure your camera/mic settings from de top menu or you can also check for the service's status.

				You can add up to 50 friends (including you) to the group chat.
				</p>
			<div id="myCamera">
				<div id="devicePanelContainer">
					<div id="devicePanelBackground">
						<div id="devicePanelInset"></div>
					</div>
				</div> 
			</div>
			<div id="subscribers"></div>
			<input type="button" value="Connect" id ="connectLink" onClick="javascript:connect()" />
       		<input type="button" value="Leave" id ="disconnectLink" onClick="javascript:disconnect()" />
       		<input type="button" value="Start Publishing" id ="publishLink" onClick="javascript:startPublishing()" />
       		<input type="button" value="Stop Publishing" id ="unpublishLink" onClick="javascript:stopPublishing()" />
		</div>
	</div>
	<footer> THIS IS THE FOOTER </footer>
	<div id="genericDialog">
		<div id="connected-box">You are Online!</div>
		<div id="session-id-box"></div>
	</div>
	
</div>
  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
  <![endif]-->
</body>
<script type="text/javascript" charset="utf-8">
	
	var key = "${api_secret}";
	
	function launchSvcDialog(){
		$("#genericDialog").dialog({
		    	title: "Service Status",
		    	autoOpen: false,
		    	modal:true,
		    	draggable:true,
		    	resizable:true,
		    	width: 200,
		    	minHeight: 50,
		    	height:'auto',
		    	dialogClass: 'ui-jqdialog',
		    	closeOnEscape: true });
		
		$('#genericDialog').dialog('open');
	}
	
</script>
</html>
